<template>
	<view>
		<view class="app-background"></view>
		<my-navbar title="班级管理"></my-navbar>
		<view class="squadMessage" v-if="code">
			<template v-if="list.length">
				<view class="squadMessage-squads">
					<view v-for="(i, j) in list" :key="j" class="squad-item" @click.stop="clickCard(i)">
						<view class="item-squad">{{ i.gradeName }}{{ i.squadName }}班</view>
						<view class="item-teacher">
							<image class="teacher-photo" :src="i.classTeacherPhoto ? i.classTeacherPhoto : '/static/my/headicon_none.png'"></image>
							<view class="teacher-names">班主任：{{ i.classTeacherName || '无' }}</view>
						</view>
						<view class="item-stats">
							<view class="stats-item">
								<text class="big">{{ i.teacherNumber }}</text>
								<text>老师</text>
							</view>
							<view class="stats-item">
								<text class="big">{{ i.studentNumber }}</text>
								<text>学生</text>
							</view>
							<view class="stats-item">
								<text class="big">{{ i.familyNumber }}</text>
								<text>家长</text>
							</view>
						</view>
						<view class="item-buttons">
							<view class="button-item" hover-class="button-hover" @click.stop="clickButton('exit', i)">
								<image class="item-icon quit" src="/static/my/icon_quit.png" mode="aspectFit"></image>
								<text>退出班级</text>
							</view>
							<view class="line-item"></view>
							<view class="button-item" hover-class="button-hover" @click.stop="clickButton('check', i)">
								<image class="item-icon view" src="/static/my/icon_view.png" mode="aspectFit"></image>
								<text>查看成员</text>
							</view>
						</view>
					</view>
					<view v-if="list.length>6" class="page-nomore">---没有更多了---</view>
				</view>
				<!-- 浮动底部 START -->
				<view class="app-offset">
					<view class="squadMessage-button"></view>
					<safe-area></safe-area>
				</view>
				<view class="app-fixed-bottom" style="background-color: #FFFFFF;">
					<view class="squadMessage-button primary app-button" hover-class="hover" @click="clickButton('join')">加入班级</view>
					<safe-area></safe-area>
				</view>
				<!-- 浮动底部 END -->
			</template>
			<template v-else>
				<view class="squadMessage-none">
					<image class="none-image" src="/static/notice/image_none.png"></image>
					<view class="none-text">您还没有加入班级</view>
					<view class="none-button app-button" hover-class="hover" @click="clickButton('join')">加入班级</view>
				</view>
			</template>
		</view>
		<!-- 弹窗 START -->
		<template>
			<my-popup :custom="1" :show="p_exit.show" @handle="p_exit.handle">
				<view class="popup1">
					<view class="popup1-content">确定退出该班级？</view>
					<view class="popup1-buttons">
						<view class="button-item app-button" hover-class="hover" @click="p_exit.clickButton(0)">取消</view>
						<view class="button-item primary app-button" hover-class="hover" @click="p_exit.clickButton(1)">确定</view>
					</view>
				</view>
			</my-popup>
		</template>
		<!-- 弹窗 END -->
	</view>
</template>

<script>
import { mapActions } from 'vuex';
export default {
	data() {
		return {
			p_exit: {
				show: false,
				handle: fn => {
					if (fn === 'clickMask') this.p_exit.show = false;
				},
				clickButton: () => {}
			},
			list: [],
			pageNo: 1,
			pageSize: 10,
			pageCount: 0,
			code: 0
		};
	},
	methods: {
		...mapActions(['updateJxyUserInfo']),
		async getList(ifRefresh) {
			if (ifRefresh) {
				this.pageCount = 0;
				this.pageNo = 1;
			}
			if (this.pageCount !== 0 && this.pageNo >= this.pageCount + 1) {
				this.$showToast('已加载全部班级数据');
				return;
			}
			const page = {
				pageNo: this.pageNo,
				pageSize: this.pageSize
			};
			const data = {};
			uni.showLoading({
				mask: true
			});
			let res1;
			try {
				res1 = await this.$api.common.get_squad_message_list({ page, data });
			} catch (err) {
				this.code = err.code;
				uni.hideLoading();
				this.$showToast(err.message || '获取班级数据失败');
				return;
			}
			if (ifRefresh) {
				this.list = [];
			}
			this.code = res1.code;
			this.pageCount = res1.result.pageCount;
			this.list.push(...res1.result.data);
			uni.hideLoading();
		},
		async clickButton(tag, item) {
			switch (tag) {
				case 'join':
					uni.navigateTo({
						url: '/packageA/pages/my/selectSquad'
					});
					return;
				case 'exit':
					this.p_exit.clickButton = async id => {
						this.p_exit.show = false;
						if (id == 0) return;
						uni.showLoading({
							mask: true
						});
						let res1;
						try {
							res1 = await this.$api.user.exit_squad({
								id: item.id
							});
						} catch (err) {
							uni.hideLoading();
							this.$showToast(err.message || '操作失败');
							return;
						}
						uni.hideLoading();
						try {
							await this.getList(true);
						} catch (err) {}
						try {
							this.updateJxyUserInfo();
						} catch (err) {}
						this.$showToast('操作成功');
					};
					this.p_exit.show = true;
					return;
				case 'check':
					uni.navigateTo({
						url: `/packageA/pages/my/memberList?squad=${item.squad}`
					});
					return;
			}
		},
		clickCard(item) {
			uni.navigateTo({
				url: '/packageA/pages/my/squadDetail' + `?squad=${item.squad}`
			});
		}
	},
	onShow() {
		this.getList(true);
	},
	async onPullDownRefresh() {
		await this.getList(true);
		uni.stopPullDownRefresh();
	},
	onReachBottom() {
		this.pageNo++;
		this.getList();
	}
};
</script>

<style lang="less" scoped>
.page-nomore {
	transform: translateY(-15rpx);

	font-size: 24rpx;
	text-align: center;
	color: #7f7f7f;
}

.squadMessage-none {
	display: flex;
	flex-direction: column;
	align-items: center;
	
	position: absolute;
	left: 50%;
	top: 40%;
	transform: translate(-50%,-50%);
	.none-image {
		width: 334rpx;
		height: 255rpx;
		margin-top: 100rpx;
	}
	.none-text {
		font-size: 28rpx;
		color: #707070;
		margin-top: 70rpx;
	}
	.none-button {
		width: 448rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #fd8c19, #ff6600);
		border-radius: 44rpx;
		margin-top: 20rpx;

		position: relative;

		font-size: 32rpx;
		color: #ffffff;

		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.squadMessage-squads {
	padding: 0 30rpx;
	.squad-item {
		background-color: #ffffff;
		border-radius: 24rpx;
		margin: 30rpx 0;
		overflow: hidden;

		.item-squad {
			padding: 0 30rpx;
			padding-top: 40rpx;
			padding-bottom: 20rpx;
			
			font-size: 32rpx;
			font-weight: 700;
			color: #222222;
		}

		.item-teacher {
			padding: 0 30rpx;

			display: flex;
			align-items: center;

			.teacher-photo {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
			}
			.teacher-names {
				font-size: 28rpx;
				color: #666666;

				margin-left: 20rpx;
			}
		}

		.item-stats {
			display: flex;
			padding: 30rpx 0;

			.stats-item {
				flex: 1;
				font-size: 28rpx;
				color: #666666;
				text-align: center;

				border-right: 2rpx solid #e3e4e6;

				&:last-child {
					border-right: none;
				}

				.big {
					margin-right: 5rpx;

					font-size: 48rpx;
					font-weight: 500;
					color: #222222;
				}
			}
		}

		.item-buttons {
			display: flex;
			border-top: 2rpx solid #e3e4e6;

			.button-item {
				flex: 1;
				transition: all 0.3s;

				font-size: 28rpx;
				color: #666666;

				display: flex;
				align-items: center;
				justify-content: center;

				.item-icon {
					margin-right: 15rpx;

					&.quit {
						width: 33rpx;
						height: 33rpx;
					}
					&.view {
						width: 32rpx;
						height: 34rpx;
					}
				}
			}
			.line-item {
				width: 2rpx;
				height: 70rpx;
				background-color: #e3e4e6;
				margin: 15rpx 0;
			}
		}
	}
}

.squadMessage-button {
	height: 88rpx;
	border-radius: 44rpx;
	background-color: #eeeeee;
	margin: 0 30rpx 30rpx 30rpx;

	font-size: 32rpx;
	color: #222222;

	display: flex;
	justify-content: center;
	align-items: center;

	&.primary {
		background-color: #ff6600;
		color: #ffffff;
	}
}

.popup1 {
	width: 594rpx;
	border-radius: 30rpx;
	background-color: #ffffff;
	overflow: hidden;

	color: #222222;

	.popup1-content {
		line-height: 60rpx;
		padding: 40rpx 30rpx;

		font-size: 32rpx;
		text-align: center;
	}

	.popup1-buttons {
		height: 90rpx;
		border-top: 2rpx solid #e3e4e699;

		display: flex;

		.button-item {
			flex: 1;
			border-right: 2rpx solid #e3e4e699;

			position: relative;

			font-size: 32rpx;
			font-weight: 500;
			color: #222222;

			display: flex;
			align-items: center;
			justify-content: center;

			&:last-child {
				border-right: none;
			}

			&.primary {
				color: #ff6600;
			}
		}
	}
}
</style>
